<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【新消息】下载的视频已完成!请查收.....</title>
    <style type="text/css"></style>
</head>
<body>
    <h1>document</h1>
    <hr>


    <p id="msg1">上课不听讲,一般有三种情况: 1.手里有个手机. 2.心里有个美女. 3.身边做个逗比...</p>
    <p id="msg2">上课不听讲,一般有三种情况: 1.手里有个手机. 2.心里有个美女. 3.身边做个逗比...</p>

    <hr>


    <h2 id="show"></h2>

    <script>
        setInterval(function(){
            var str = document.title;

            var fstr = str.charAt(0);

            var estr = str.substr(1);

            document.title = estr + fstr;

            var msg1 = document.getElementById('msg1');

            var msg2 = document.getElementById('msg2');

            var str1 = msg1.innerHTML;
            var str2 = msg2.innerHTML;


            // 方法1
            msg1.innerHTML = str1.substr(1) + str1[0];


            //方法2
            arr = str2.split('');
            arr.push(arr.shift());
            msg2.innerHTML = arr.join('');
        },300);


        //循环变红
        
        var string = '光阴似箭,日月如梭';

        var i = 0;

        setInterval(function(){
            // 如果索引超过字符串长度,就重置为0
            if(i >= string.length ) i = 0;

            //赋予样式
            document.getElementById('show').innerHTML = show(i, string);

            i++;
        },300);

        function show(i, str){

            var tmp =str.substr(0,i);

            tmp += '<font color="red" size="8">' + str[i] + '</font>';

            tmp += str.substr(i+1);

            return tmp;
        }
    </script>
</body>
</html>